<template>
	<view class="container product-list">
		<!-- <HeaderNav>></HeaderNav> -->

		<view style="z-index:999;position: fixed;">
			<header-bar :isBack="true" title="产品列表" titleTintColor="#000000"  :bgColor="{background: '#ffffff'}" >
				<text slot="back" class="uni_btnIco myicon myicon-zuojiantou" style="" ><</text>
			</header-bar>
		</view>

		<view class="rf-header-box"  :style="{paddingTop: 90 + 'rpx' }">
			<view class="rf-header flex-row" :style="{width:width+'px',height:height+'px'}">
				<!-- 	<view class="rf-back" :style="{marginTop:arrowTop+'px'}" @tap="back">
						<text class="iconfont iconzuo"></text>
					</view> -->
				<view class="input-box"  style="flex:1; min-width:0;" :style="{marginTop:inputTop+'px'}">
					<input
						v-model="keyword"
						@confirm="search"
						placeholder="请输入关键字"
						placeholder-style="font-size: 24upx; color:#ccc;"
						type="text" />
					<text class="icon iconfont iconsousuo2" @tap.stop="search"></text>
				</view>
				<view class="search-ad" :style="{marginTop:inputTop+'px'}">

					<view class="rf-top-item rf-icon-ml" @tap="screen" data-index="3">
						<text>筛选</text>
						<!--<rf-icon name="screen" :size="12" color="#333" rf-icon-class="rf-ml" :bold="true"></rf-icon>-->
					</view>

					<!-- <view class="rf-top-item" @tap="screen" data-index="2">
						<text class="iconfont" :class="isList>0? 'iconliebiaoqiehuan':'iconfenlei'"></text>
					</view> -->

				</view>



			</view>
		</view>

		<view class="product-list-wrapper">
			<!-- <rf-product-list :bottom="0" :list="productList" :isList="isList" :style="{paddingTop: 90 + 'rpx' }"></rf-product-list> -->
			<rf-product-list :bottom="0" :list="productList" :isList="isList" :style="{paddingTop: 0 + 'rpx' }"></rf-product-list>
		</view>
		<rf-load-more
			:status="loadingType"
			v-if="productList.length > 0"
		></rf-load-more>
		<rf-empty
			:info="errorInfo || '该分类暂无商品'"
			v-if="productList.length === 0 && !loading"
		></rf-empty>
		<!--顶部下拉筛选弹层 属性-->
		<rf-top-drawer bgcolor="#f7f7f7" :show="dropScreenShow" :paddingbtm="110" :translatey="dropScreenH" @close="btnCloseDrop">
			<scroll-view class="rf-scroll-box" scroll-y :scroll-top="scrollTop">
				<view class="rf-seizeaseat-20"></view>
				<view class="rf-drop-item rf-icon-middle" :class="[item.selected?'rf-bold':'']" v-for="(item,index) in attrData" :key="index" @tap.stop="btnSelected" :data-index="index">
					<text class="iconfont icongouxuan" :class="'text-' + themeColor.name" :size="16" :bold="true" v-if="item.selected" rf-icon-class="rf-middle"></text>
					<text class="rf-ml rf-middle">{{item.name}}</text>
				</view>
				<view class="rf-seizeaseat-30"></view>
			</scroll-view>
			<view class="rf-drop-btnbox">
				<view class="rf-drop-btn confirm-btn" :hover-stay-time="150" @tap="reset">重置</view>
				<view class="rf-drop-btn confirm-btn" :hover-stay-time="150" @tap="btnSure">确定</view>
			</view>
		</rf-top-drawer>
		<!---顶部下拉筛选弹层 属性-->
		<!--左抽屉弹层 筛选 -->
		<uni-drawer
			class="rf-drawer"
			:visible="drawer"
			mode="right"
			@close="closeDrawer()"
		>
			<view class="rf-drawer-box" :style="{paddingTop:height+'px'}">
				<scroll-view class="rf-drawer-scroll" scroll-y :style="{height:drawerH+'px'}">
					<!-- <view class="rf-drawer-title">
						<text class="rf-title-bold">价格区间</text>
						<view class="rf-attr-right" :class="'text-' + themeColor.name">
							<text>请输入价格区间</text>
						</view>
					</view>
					<view class="rf-drawer-content">
						<input placeholder-class="rf-phcolor" v-model="minPrice" class="rf-input" placeholder="最低价" maxlength="11" type='number' />
						<text>-</text>
						<input placeholder-class="rf-phcolor" v-model="maxPrice"  class="rf-input" placeholder="最高价" maxlength="11" type='number' />
					</view> -->

					<!-- 保留现有的分类 -->
					<view class="rf-drawer-title">
						<text class="rf-title-bold">产品分类</text>
						<view class="rf-attr-right" :class="'text-' + themeColor.name">
							<text>请选择分类</text>
						</view>
					</view>
					<view class="rf-drawer-content 1111">
						<!-- 树形分类选择器 -->
						<view class="picker-trigger" @tap="showCategoryPicker">
							<text class="picker-text">{{ selectedCategoryPath || '请选择分类' }}</text>
							<text class="picker-arrow">▼</text>
						</view>

						<rf-picker
							ref="categoryPicker"
							:pickerValueArray="categoryOptions"
							v-model="selectedCategoryIndex"
							mode="selector"
							@onConfirm="onCategoryConfirm"
							@onCancel="onCategoryCancel"
							class="tree-picker"
							v-if="categoryOptions.length > 0"
						></rf-picker>

						<!-- 显示当前选择的完整路径 -->
						<view v-if="selectedCategoryPath" class="category-path">
							<text>当前选择: {{ selectedCategoryPath }}</text>
						</view>


					</view>

					<!-- 添加属性筛选部分 -->
					<view class="rf-drawer-title">
						<text class="rf-title-bold">属性筛选</text>
						<view class="rf-attr-right" @tap="toggleSection('attr')">
							<text class="arrow-icon">{{ openSections.attr ? '∧' : '∨' }}</text>
						</view>
					</view>
					<view class="rf-drawer-content" v-show="openSections.attr" style="display: flex; flex-direction: column; width: 100%; padding: 0;">
						<!-- 动态生成规格筛选区块 -->


						<view  v-for="spec in Object.values(specList)" :key="spec.id"
									 class="attr-section" style="width: 100%; display: block;padding:0 20rpx; margin-bottom:20rpx; background:#fff;">
							<view class="attr-header" @tap="toggleSection(spec.id)" style="display: flex; justify-content: space-between; align-items: center; padding: 24rpx; background: #fff5f5;">
								<text style="font-size: 28rpx; color: #333;">{{spec.title}}</text>
								<text style="color: #999; font-size: 24rpx;">{{ expandedSpecId === spec.id ? '收起∧' : '展开∨' }}</text>
							</view>
							<!-- 筛选输入框 -->
							<view v-show="expandedSpecId === spec.id" class="spec-search-container">
								<input
									v-model="specSearchText[spec.id]"
									:placeholder="`搜索${spec.title}...`"p
									class="spec-search-input"
									@input="onSpecSearch(spec.id, $event)"
								/>
							</view>
							<view v-show="expandedSpecId === spec.id" style="padding: 20rpx; width: 100%; box-sizing: border-box; background: #fff;">
								<checkbox-group
									style="width: 100%; display: flex; flex-direction: column;"
									@change="(e) => onSpecCheckboxChange(e, spec.id)"
								>
									<label
										v-for="(item, index) in getFilteredSpecValues(spec)"
										v-if="item && item.id"
										:key="item.id"
										:class="{'item-selected': selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)}"
										style="display: flex; align-items: center; padding: 20rpx 0; border-bottom: 1px solid #f5f5f5; width: 100%; box-sizing: border-box;"
									>
										<view class="custom-checkbox">
											<checkbox
												:value="item.id"
												:checked="selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)"
												style="transform: scale(0.8); opacity: 0; position: absolute;"
											/>
											<view class="checkbox-icon" :class="{'checkbox-selected': selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)}">
												<text v-if="selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)" class="checkbox-tick">✓</text>
											</view>
										</view>
										<text style="margin-left: 10rpx; font-size: 26rpx; color: #333; flex: 1;">{{ item.title }}</text>
									</label>
								</checkbox-group>
							</view>
						</view>


					</view>

					<view class="rf-safearea-bottom"></view>
				</scroll-view>
				<view class="rf-attr-btnbox">
					<view class="rf-attr-safearea">
						<view class="rf-drawer-btn rf-drawerbtn-black  confirm-btn" @tap="resetAll">重置</view>
						<view class="rf-drawer-btn  confirm-btn" @tap="confirmAll">确定</view>
					</view>
				</view>
			</view>
		</uni-drawer>
		<!--左抽屉弹层 筛选-->
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
		<uni-popup v-if="copySuccessDialog" type="center" :mask-click="false">
			<view style="padding: 32rpx 48rpx; background: #fff; border-radius: 12rpx; text-align: center;">
				<text style="font-size: 32rpx; color: #222;">复制成功</text>
				<view style="margin-top: 32rpx;">
					<button style="background: #e53935; color: #fff; border-radius: 8rpx; padding: 12rpx 48rpx; font-size: 28rpx;" @tap="copySuccessDialog = false">确定</button>
				</view>
			</view>
		</uni-popup>
		<tabBar></tabBar>
	</view>
</template>
<script>
import HeaderNav from '@/components/header-nav/product.vue';
import HeaderBar from '@/components/header-nav/productNew.vue';
import uniDrawer from '@/components/uni-drawer/drawer';
import rfTopDrawer from '@/components/rf-top-drawer';
import rfAttrContent from '@/components/rf-attr-content';
import rfProductList from '@/components/rf-product-list';
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
import rfPicker from '@/components/rf-picker/index.vue'; // 修正为 index.vue
import { cartItemCount, cartItemCreate, productDetail, productList, productCate, productSpec } from '@/api/product';
import { mapMutations } from 'vuex';
/* eslint-disable */
export default {
	components: {
		HeaderBar,
		HeaderNav,
		uniDrawer,
		rfProductList,
		rfAttrContent,
		rfLoadMore,
		rfTopDrawer,
		rfPicker // 注册rf-picker组件
	},
	filters: {
		filterTotalSales (val) {
			if (val > 10000) {
				val = `${(val / 10000).toFixed(2)}w`;
			}
			return val;
		}
	},

	data() {
		return {
			keyword: '',
			errorInfo: '',
			loadingType: 'more',
			page: 1,
			loading: true,
			specClass: 'none',
			productDetail: {},
			searchKey: "", //搜索关键词
			width: 200, //header宽度
			height: 90, //header高度
			inputTop: 0, //搜索框距离顶部距离
			arrowTop: 0, //箭头距离顶部距离
			dropScreenH: 0, //下拉筛选框距顶部距离
			attrData: [],
			attrIndex: -1,
			dropScreenShow: false,
			scrollTop: 0,
			tabIndex: 0, //顶部筛选索引
			isList: true, //是否以列表展示  | 列表或大图
			drawer: false,
			drawerH: 0, //抽屉内部scrollview高度
			selectedName: "综合",
			selectH: 0,
			dropdownList: [{
				name: "综合",
				selected: true,
				param: {}
			}, {
				name: "价格升序",
				selected: false,
				param: { price: 'asc' }
			}, {
				name: "价格降序",
				selected: false,
				param: { price: 'desc' }
			}],
			attrArr: [{
				name: "全部",
				selectedName: "全部",
				isActive: false,
				params: {},
				list: []
			}, {
				name: "新品",
				selectedName: "新品",
				isActive: false,
				params: { is_new: 1 },
				list: []
			}, {
				name: "推荐",
				selectedName: "推荐",
				isActive: false,
				params: { is_recommend: 1 },
				list: []
			}, {
				name: "热门",
				selectedName: "热门",
				isActive: false,
				params: { is_hot: 1 },
				list: []
			}
				// 	{
				// 	name: "品牌",
				// 	selectedName: "品牌",
				// 	isActive: false,
				// 	list: [{
				// 		name: "trendsetter",
				// 		selected: false
				// 	}, {
				// 		name: "维肯（Viken）",
				// 		selected: false
				// 	}, {
				// 		name: "AORO",
				// 		selected: false
				// 	}, {
				// 		name: "苏发",
				// 		selected: false
				// 	}, {
				// 		name: "飞花令（FHL）",
				// 		selected: false
				// 	}, {
				// 		name: "叶梦丝",
				// 		selected: false
				// 	}, {
				// 		name: "ITZOOM",
				// 		selected: false
				// 	}, {
				// 		name: "亿魅",
				// 		selected: false
				// 	}, {
				// 		name: "LEIKS",
				// 		selected: false
				// 	}, {
				// 		name: "雷克士",
				// 		selected: false
				// 	}, {
				// 		name: "蕊芬妮",
				// 		selected: false
				// 	}, {
				// 		name: "辉宏达",
				// 		selected: false
				// 	}, {
				// 		name: "英西达",
				// 		selected: false
				// 	}, {
				// 		name: "戴为",
				// 		selected: false
				// 	}, {
				// 		name: "魔风者",
				// 		selected: false
				// 	}, {
				// 		name: "即满",
				// 		selected: false
				// 	}, {
				// 		name: "北比",
				// 		selected: false
				// 	}, {
				// 		name: "娱浪",
				// 		selected: false
				// 	}, {
				// 		name: "搞怪猪",
				// 		selected: false
				// 	}]
				// }
				// {
				// name: "类型",
				// selectedName: "类型",
				// isActive: false,
				// list: [{
				// 	name: "线充套装",
				// 	selected: false
				// }, {
				// 	name: "单条装",
				// 	selected: false
				// }, {
				// 	name: "车载充电器",
				// 	selected: false
				// }, {
				// 	name: "PD快充",
				// 	selected: false
				// }, {
				// 	name: "数据线转换器",
				// 	selected: false
				// }, {
				// 	name: "多条装",
				// 	selected: false
				// }, {
				// 	name: "充电插头",
				// 	selected: false
				// }, {
				// 	name: "无线充电器",
				// 	selected: false
				// }, {
				// 	name: "座式充电器",
				// 	selected: false
				// }, {
				// 	name: "万能充",
				// 	selected: false
				// }, {
				// 	name: "转换器/转接线",
				// 	selected: false
				// }, {
				// 	name: "MFI苹果认证",
				// 	selected: false
				// }, {
				// 	name: "转换器",
				// 	selected: false
				// }, {
				// 	name: "苹果认证",
				// 	selected: false
				// }
				// 	]
				// },
				// 	{
				// 	name: "适用手机",
				// 	selectedName: "适用手机",
				// 	isActive: false,
				// 	list: [{
				// 		name: "通用",
				// 		selected: false
				// 	}, {
				// 		name: "vivo",
				// 		selected: false
				// 	}, {
				// 		name: "OPPO",
				// 		selected: false
				// 	}, {
				// 		name: "魅族",
				// 		selected: false
				// 	}, {
				// 		name: "苹果",
				// 		selected: false
				// 	}, {
				// 		name: "华为",
				// 		selected: false
				// 	}, {
				// 		name: "三星",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀",
				// 		selected: false
				// 	}, {
				// 		name: "诺基亚5",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀4",
				// 		selected: false
				// 	}, {
				// 		name: "诺基",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀",
				// 		selected: false
				// 	}, {
				// 		name: "诺基亚2",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀2",
				// 		selected: false
				// 	}, {
				// 		name: "诺基",
				// 		selected: false
				// 	}]
				// }
			],
			productList: [
			],
			pageIndex: 1,
			pullUpOn: true,
			productCateList: [],
			brandList: [],
			currentCateStr: '',
			currentBrandStr: '',
			minPrice: '',
			maxPrice: '',
			productParams: {},
			copySuccessDialog: false,
			openSections: {
				attr: true
			},
			expandedSpecId: null, // 当前展开的规格ID
			selectedFilters: {
				productClass: [],
				protein: [],
				application: []
			},
			searchText: {
				protein: ''
			},
			specSearchText: {}, // 每个规格的搜索文本
			productClassList: [],
			proteinList: [
				{ id: '1', title: 'Protein A' },
				{ id: '2', title: 'Protein B' },
				{ id: '3', title: 'Protein C' },
				{ id: '4', title: 'Protein D' },
				{ id: '5', title: 'Protein E' }
			],
			applicationList: [
				{ id: '1', title: '检测' },
				{ id: '2', title: '免疫组化' },
				{ id: '3', title: '测序' },
				{ id: '4', title: '流式细胞术' }
			],
			currentCategory: null,
			currentSubcategory: null,
			currentThirdLevelCategory: null,
			categoryDisplayList: [],
			subcategoryDisplayList: [],
			thirdLevelCategoryDisplayList: [],
			hasSubcategories: false,
			hasThirdLevelCategories: false,
			originalCategoryData: [], // 存储原始分类数据
			flattenedCategories: [], // 存储扁平化后的所有分类
			selectedCategoryId: null, // 当前选中的分类ID
			selectedCategoryPath: '', // 当前选中的分类路径
			selectedCategoryTitle: '', // 当前选中的分类标题
			selectedCategoryIndex: [0], // picker当前选中索引
			specList: [], // 规格列表数据
			currentSpecIds: [], // 当前筛选的规格ID列表
			dataLoadStatus: {
				categoryLoaded: false,
				specLoaded: false
			}, // 数据加载状态
			defaultCategoryId: null, // 默认选中的分类ID
			categoryOptions: [] // 分类选择器的选项数组
		}
	},
	created() {
		console.log('测试数据已加载:', this.proteinList, this.applicationList);
		// 初始化数据
		this.getProductSpec();
	},
	onLoad(options) {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif
		uni.getSystemInfo({
			success: (res) => {
				this.width = obj.left || res.windowWidth;
				this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 64);
				this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight + 7);
				this.arrowTop = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
				this.searchKey = options.searchKey || "";
				//略小，避免误差带来的影响
				this.dropScreenH = this.height * 750 / res.windowWidth + 186;
				this.drawerH = res.windowHeight - uni.upx2px(100) - this.height
			}
		});

		// 同时请求分类和规格数据
		this.getProductCate();
		this.getProductSpec();

		this.initData(options);
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.page = 1;
		this.productList.length = 0;
		this.getProductList('refresh', {});
	},
	// 加载更多
	onReachBottom() {
		if (this.loadingType === 'nomore') return;
		this.page++;
		this.getProductList();
	},
	methods: {
		...mapMutations(['setCartNum']),
		// 初始化数据
		initData(options) {
			let params = {};
			if (options.cate_id) {
				params.cate_id = options.cate_id;
				// 保存分类ID，用于设置默认选中
				this.defaultCategoryId = options.cate_id;
				console.log('保存默认分类ID:', options.cate_id);
			}
			if (options.param) {
				params = { ...params, ...JSON.parse(options.param) }
			}
			if (options.keyword) {
				this.keyword = options.keyword;
				params.keyword = options.keyword;
			}

			// 处理spec_ids参数
			if (options.spec_ids) {
				params.spec_ids = options.spec_ids;
				// 保存spec_ids用于后续设置选中状态
				this.currentSpecIds = options.spec_ids.split(',');
				console.log('保存默认选中的规格IDs:', this.currentSpecIds);
			}

			// 检查是否有规格筛选参数
			Object.keys(options).forEach(key => {
				if (key.startsWith('prop_')) {
					params[key] = options[key];

					// 更新选中状态
					const propType = key.replace('prop_', '');
					if (this.selectedFilters[propType]) {
						this.selectedFilters[propType] = options[key].split(',');
					}
				}
			});

			this.productParams = params;
			this.getProductList();
		},
		stopPrevent() {},
		// 规格弹窗开关
		toggleSpec(row) {
			if (parseInt(row.status, 10) === 0) return;
			if (this.specClass === 'show') {
				this.specClass = 'hide';
				if (row.stock === 0) {
					this.$mHelper.toast('库存不足');
					return;
				}
				if (row.type.toString() === '1') {
					// 加入购物车
					this.handleCartItemCreate(row.skuId, row.cartCount);
				} else if (row.type.toString() === '2') {
					// 立即购买
					const list = {};
					const data = {};
					data.sku_id = row.skuId;
					data.num = row.cartCount;
					if (
						this.productDetail.point_exchange_type.toString() === '2' ||
						this.productDetail.point_exchange_type.toString() === '4' ||
						(this.productDetail.point_exchange_type.toString() === '3' &&
							this.isPointExchange)
					) {
						list.type = 'point_exchange';
					} else {
						list.type = 'buy_now';
					}
					list.data = JSON.stringify(data);
					this.navTo(`/pages/order/create/order?data=${JSON.stringify(list)}`);
				}
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			} else if (this.specClass === 'none') {
				this.getProductDetail(row);
			}
		},
		hideSpec() {
			this.specClass = 'hide';
			setTimeout(() => {
				this.specClass = 'none';
			}, 250);
		},
		// 添加商品至购物车
		async handleCartItemCreate(skuId, cartCount) {
			await this.$http
				.post(`${cartItemCreate}`, {
					sku_id: skuId,
					num: cartCount
				})
				.then(async () => {
					await this.$http.get(`${cartItemCount}`).then(async r => {
						this.cartNum = r.data;
						this.setCartNum(r.data);
					});
					this.$mHelper.toast('添加购物车成功');
				});
		},
		// 获取产品详情
		async getProductDetail(row) {
			await this.$http
				.get(`${productDetail}`, {
					id: row.id
				})
				.then(async r => {
					this.productDetail = r.data;
					this.productDetail.sku_name = row.sku_name;
					this.specClass = 'show';
				});
		},
		px(num) {
			return uni.upx2px(num) + "px"
		},
		btnDropChange(e) {
			let index = parseInt(e.currentTarget.dataset.index, 10);
			let arr = JSON.parse(JSON.stringify(this.attrArr[index].list));
			if (arr.length === 0) {
				this.$set(this.attrArr[index], "isActive", !this.attrArr[index].isActive)
				if (this.attrArr[index].isActive && index === 0) {
					this.attrArr[1].isActive = false;
					this.attrArr[2].isActive = false;
					this.attrArr[3].isActive = false;
				}
				if (this.attrArr[1].isActive || this.attrArr[2].isActive || this.attrArr[3].isActive) {
					this.attrArr[0].isActive = false;
				}
			} else {
				this.attrData = arr;
				this.attrIndex = index;
				this.dropScreenShow = true;
				this.$set(this.attrArr[index], "isActive", false);
				this.scrollTop = 1;
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			}
			let params = {};
			if (this.attrArr[0].isActive) {
				params = {};
			} else {
				params.keyword = this.keyword;
			}
			this.attrArr.forEach(item => {
				if (item.isActive) {
					params = {...params, ...item.params }
				}
			});
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.productParams = params;
			this.getProductList();
		},
		btnSelected(e) {
			let index = e.currentTarget.dataset.index;
			this.$set(this.attrData[index], "selected", !this.attrData[index].selected)
		},
		async reset() {
			this.currentBrandStr = '';
			this.currentCateStr = '';
			this.minPrice = '';
			this.maxPrice = '';
			await this.getBrandList();
			await this.getProductCate();
		},
		btnCloseDrop() {
			this.scrollTop = 1;
			this.$nextTick(() => {
				this.scrollTop = 0
			});
			this.dropScreenShow = false;
			this.attrIndex = -1
		},
		btnSure() {
			let index = this.attrIndex;
			let arr = this.attrData;
			let active = false;
			let attrName = "";
			//这里只是为了展示选中效果,并非实际场景
			for (let item of arr) {
				if (item.selected) {
					active = true;
					attrName += attrName ? ";" + item.name : item.name
				}
			}
			let obj = this.attrArr[index];
			this.btnCloseDrop();
			this.$set(obj, "isActive", active);
			this.$set(obj, "selectedName", attrName);
		},
		showDropdownList() {
			this.selectH = 246;
			this.tabIndex = 0;
		},
		hideDropdownList() {
			this.selectH = 0
		},
		dropdownItem(e) {
			let index = parseInt(e.currentTarget.dataset.index, 10);
			let arr = this.dropdownList;
			for (let i = 0; i < arr.length; i++) {
				if (i === index) {
					arr[i].selected = true;
				} else {
					arr[i].selected = false;
				}
			}
			this.dropdownList = arr;
			this.selectedName = index === 0 ? '综合' : index === 1 ? '价格升序' : '价格降序';
			this.selectH = 0;
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.productParams = this.dropdownList[index].param;
			this.getProductList();
		},
		screen(e) {
			let index = parseInt(e.currentTarget.dataset.index, 10);
			if (index === 0) {
				this.showDropdownList();
			} else if (index === 1) {
				let params = {}
				if (this.tabIndex === 1) {
					this.tabIndex = null;
					params.total_sales = 'asc';
				} else {
					this.tabIndex = 1;
					params.total_sales = 'desc';
				}
				this.page = 1;
				this.productList = [];
				this.loading = true;
				this.productParams = params;
				this.getProductList();
			} else if (index === 2) {
				this.isList = !this.isList
			} else if (index === 3) {
				// 确保所有section都可见
				this.openSections.attr = true;

				// 打开抽屉
				this.drawer = true;
			}
		},
		closeDrawer() {
			this.drawer = false;
			const params = {};
			if (this.maxPrice) {
				params.max_price = this.maxPrice;
			}
			if (this.minPrice) {
				params.min_price = this.minPrice;
			}
			const brandArr = [];
			this.brandList.forEach(item => {
				if (item.isActive) {
					brandArr.push(item.id);
				}
			});
			if (brandArr.join(',')) {
				params.brand_id = brandArr.join(',');
			}
			const cateArr = [];
			this.productCateList.forEach(item => {
				if (item.isActive) {
					cateArr.push(item.id);
				}
			});
			if (cateArr.join(',')) {
				params.cate_id = cateArr.join(',');
			}
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.productParams = params;
			this.getProductList();
		},
		cateBtnSelected(index) {
			this.currentCateStr = '';

			// 切换当前分类的选中状态
			this.$set(this.productCateList[index], "isActive", !this.productCateList[index].isActive);

			// 获取当前分类的层级
			const currentLevel = this.productCateList[index].level;
			const currentId = this.productCateList[index].id;

			// 如果是选中状态，则取消同级其他分类的选中状态
			if (this.productCateList[index].isActive) {
				this.productCateList.forEach((item, idx) => {
					if (idx !== index && item.level === currentLevel && item.isActive) {
						this.$set(this.productCateList[idx], "isActive", false);
					}
				});
			}

			// 更新显示的分类名称
			const selectedCategories = this.productCateList.filter(item => item.isActive);
			const categoryNames = selectedCategories.map(item => item.originalTitle || item.title);
			this.currentCateStr = categoryNames.join(',');

			console.log('已选分类:', this.currentCateStr);
		},
		brandBtnSelected(index) {
			this.currentBrandStr = '';
			this.$set(this.brandList[index], "isActive", !this.brandList[index].isActive);
			const brandArr = [];
			this.brandList.forEach(item => {
				if (item.isActive) {
					brandArr.push(item.title);
				}
			});
			this.currentBrandStr = brandArr.join(',');
		},
		// 获取商品分类列表
		async getProductCate() {
			await this.$http
				.get(`${productCate}`)
				.then(r => {
					console.log('分类数据:', r.data);

					// 检查是否有category字段
					const categoryData = r.data.category || r.data;

					if (categoryData && categoryData.length > 0) {
						// 存储原始分类数据
						this.originalCategoryData = categoryData;

						// 扁平化所有分类
						this.flattenedCategories = [];

						// 递归函数处理多级分类
						const processCategoryTree = (categories, level = 0, parentPath = '') => {
							categories.forEach(category => {
								// 使用HTML空格实体和特殊字符表示层级结构，增加视觉上的树状效果
								let prefix = '';
								if (level > 0) {
									// 使用HTML空格实体代替普通空格，确保在所有环境中都能正确显示
									prefix = '        '.repeat(level - 1) + '├─ ';
								}
								let displayTitle ;
								if(category.count ==0  ){
									displayTitle = prefix + category.title ;
								}else{

									displayTitle = prefix + category.title + (category.count ? ` (${category.count})` : '');
								}

								const path = parentPath ? `${parentPath} > ${category.title}` : category.title;

								// 添加当前分类到扁平化列表
								this.flattenedCategories.push({
									id: category.id,
									title: displayTitle,
									originalTitle: category.title,
									level: level,
									path: path,
									hasChildren: category.children && category.children.length > 0
								});

								// 处理子分类
								if (category.children && category.children.length > 0) {
									processCategoryTree(category.children, level + 1, path);
								}
							});
						};

						// 开始处理分类树
						processCategoryTree(categoryData);

						console.log('扁平化后的所有分类:', this.flattenedCategories);

						// 设置分类选择器的选项数组
						this.categoryOptions = this.flattenedCategories.map(category => ({
							value: category.id,
							label: category.title
						}));

						// 如果有默认分类ID，设置默认选中
						if (this.defaultCategoryId) {
							this.setDefaultSelectedCategory(this.defaultCategoryId);
						}
					} else {
						console.log('没有分类数据或格式不正确');
					}
				})
				.catch(err => {
					console.error('获取分类数据失败:', err);
				});
		},
		// 获取商品品牌列表
		async getBrandList() {
			await this.$http
				.get(`${brandIndex}`)
				.then(r => {
					this.brandList = r.data;
				});
		},
		// 获取商品规格列表
		async getProductSpec() {
			await this.$http
				.get(`${productSpec}`)
				.then(r => {
					console.log('规格数据:', r.data);
					if (r.data && r.data.specs) {
						// 1. 先设置规格列表数据
						this.specList = r.data.specs;

						// 2. 初始化所有规格的选中状态和搜索文本
						// 如果是对象，转换为数组进行处理
						const specArray = Object.values(this.specList);
						specArray.forEach(spec => {
							if (spec && spec.id) {
								this.$set(this.selectedFilters, spec.id, []);
								this.$set(this.specSearchText, spec.id, '');
								console.log('初始化规格:', spec.id, spec.title, '值:', spec.value || spec.values);
							}
						});

						// 3. 设置默认选中的规格值
						this.$nextTick(() => {
							this.setDefaultSelectedSpecs();

							// 获取对象的第一个属性的id
							const firstSpec = specArray[0];
							if (firstSpec && firstSpec.id) {
								this.expandedSpecId = firstSpec.id;
								console.log('默认展开第一个规格:', this.expandedSpecId);
							}
						});
					}
				})
				.catch(err => {
					console.error('获取规格数据失败:', err);
				});
		},
		// 设置默认选中的规格值
		setDefaultSelectedSpecs() {
			if (!this.currentSpecIds || this.currentSpecIds.length === 0) {
				console.log('没有需要设置的默认规格ID');
				return;
			}

			console.log('开始设置默认选中的规格:', this.currentSpecIds);
			console.log('当前规格列表:', this.specList);

			// 遍历所有规格
			Object.values(this.specList).forEach(spec => {
				if (spec && spec.id) {
					// 获取规格值数组，兼容不同的数据结构
					let specValues = [];
					if (spec.value) {
						specValues = Array.isArray(spec.value) ? spec.value : Object.values(spec.value);
					} else if (spec.values) {
						specValues = Array.isArray(spec.values) ? spec.values : Object.values(spec.values);
					}

					// 查找匹配的规格值
					const matchedIds = [];
					specValues.forEach(item => {
						if (item && item.id) {
							// 确保ID比较时类型一致
							const itemIdStr = item.id.toString();
							if (this.currentSpecIds.includes(itemIdStr)) {
								matchedIds.push(item.id);
								console.log(`规格 ${spec.title} 中找到匹配项:`, item.title, 'ID:', item.id);
							}
						}
					});

					// 设置选中状态
					if (matchedIds.length > 0) {
						this.$set(this.selectedFilters, spec.id, matchedIds);
						console.log(`设置规格 ${spec.title} 的选中状态:`, matchedIds);
					}
				}
			});

			console.log('设置完成后的选中状态:', this.selectedFilters);
		},
		back() {
			if (this.drawer) {
				this.closeDrawer()
			} else {
				this.$mRouter.back();
			}
		},
		search() {
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.productParams = { keyword: this.keyword };
			this.getProductList();
		},
		// 获取商品列表
		async getProductList(type) {
			await this.$http
				.get(`${productList}`, {
					...this.productParams,
					page: this.page
				})
				.then(async r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
					this.productList = [...this.productList, ...r.data];
				})
				.catch(err => {
					this.errorInfo = err;
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		},
		// 跳转详情
		navTo(route) {
			this.$mRouter.push({ route });
		},
		copyProductInfo(item) {
			// 处理HTML标签：将<br>替换为换行符，去掉其他HTML标签
			const cleanIntro = this.cleanHtmlTags(item.intro_h5 || item.intro || '暂无描述');

			const info = `产品名称：${item.name}\n
			  货号：${item.skustr}\n
			  产品详情地址：https://www.enkilife.cn/h5/#/pages/product/product?id=${item.id}\n
			  产品说明书地址：${item.document || '暂无'}\n
			  商品描述：${cleanIntro}`;
			// #ifdef H5
			if (navigator && navigator.clipboard) {
				navigator.clipboard.writeText(info).then(() => {
					this.copySuccessDialog = true;
				}, () => {
					uni.showToast({ title: '复制失败', icon: 'none' });
				});
			} else {
				// 兼容老浏览器
				const textarea = document.createElement('textarea');
				textarea.value = info;
				document.body.appendChild(textarea);
				textarea.select();
				try {
					document.execCommand('copy');
					this.copySuccessDialog = true;
				} catch (err) {
					uni.showToast({ title: '复制失败', icon: 'none' });
				}
				document.body.removeChild(textarea);
			}
			// #endif

			// #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
			uni.setClipboardData({
				data: info,
				success: () => {
					this.copySuccessDialog = true;
				},
				fail: () => {
					uni.showToast({ title: '复制失败', icon: 'none' });
				}
			});
			// #endif
		},
		toggleSection(specId) {
			// 如果点击的是当前展开的规格，则收起
			if (this.expandedSpecId === specId) {
				this.expandedSpecId = null;
			} else {
				// 否则展开点击的规格
				this.expandedSpecId = specId;
			}
		},

		selectFilter(type, item, e) {
			const index = this.selectedFilters[type].indexOf(item.id);
			if (index > -1) {
				// 如果已经选中，则移除
				this.selectedFilters[type].splice(index, 1);
			} else {
				// 如果未选中，则添加（多选模式）
				this.selectedFilters[type].push(item.id);
			}
			console.log(`${type} 选择变更:`, this.selectedFilters[type]);
		},

		resetAll() {
			// 重置价格区间
			this.minPrice = '';
			this.maxPrice = '';

			// 重置分类选择
			this.resetCategorySelection();

			// 重置所有规格选择
			Object.keys(this.selectedFilters).forEach(key => {
				this.$set(this.selectedFilters, key, []);
			});

			// 重置搜索文本
			this.searchText = {};
			this.specSearchText = {};

			// 重置参数
			if (this.productParams.spec_ids) {
				delete this.productParams.spec_ids;
			}
		},

		confirmAll() {
			const params = {};

			// 添加价格区间参数
			if (this.minPrice) params.min_price = this.minPrice;
			if (this.maxPrice) params.max_price = this.maxPrice;

			// 添加分类参数
			if (this.selectedCategoryId) {
				params.cate_id = this.selectedCategoryId;
			}

			// 收集所有选中的规格值
			const allSelectedIds = [];
			Object.values(this.selectedFilters).forEach(selectedValues => {
				if (Array.isArray(selectedValues) && selectedValues.length > 0) {
					allSelectedIds.push(...selectedValues);
				}
			});

			// 如果有选中的规格，添加到参数中
			if (allSelectedIds.length > 0) {
				params.spec_ids = allSelectedIds.join(',');
			}

			console.log('提交筛选参数:', params);

			this.drawer = false;
			this.page = 1;
			this.productList = [];
			this.loading = true;
			this.productParams = params;
			this.getProductList();
		},
		onProteinCheckboxChange(e) {
			const checkedList = e.detail.value;
			this.$set(this.selectedFilters, 'protein', checkedList);
			console.log('蛋白质选择变更:', this.selectedFilters.protein);
		},
		onApplicationCheckboxChange(e) {
			const checkedList = e.detail.value;
			this.$set(this.selectedFilters, 'application', checkedList);
			console.log('应用选择变更:', this.selectedFilters.application);
		},
		onCategorySelect(e) {
			const index = e.detail.value;
			const selectedCategory = this.flattenedCategories[index];
			this.selectedCategoryId = selectedCategory.id;
			this.selectedCategoryPath = selectedCategory.path;
			this.selectedCategoryTitle = selectedCategory.title;

			// 更新当前选中的分类名称
			this.currentCateStr = this.selectedCategoryPath;

			console.log('已选分类:', this.selectedCategoryPath);
		},
		onCategoryConfirm(e) {
			const idx = e.index[0];
			const selectedOption = this.categoryOptions[idx];
			this.selectedCategoryId = selectedOption.value;
			this.selectedCategoryPath = selectedOption.path;
			this.selectedCategoryTitle = selectedOption.title;
			this.currentCateStr = selectedOption.path;
		},

		// 重置分类选择
		resetCategorySelection() {
			this.selectedCategoryId = null;
			this.selectedCategoryPath = '';
			this.selectedCategoryTitle = '';
			this.currentCateStr = '';

			if (this.productParams.cate_id) {
				delete this.productParams.cate_id;
			}

			if (this.productParams.spec_ids) {
				delete this.productParams.spec_ids;
			}

		},
		showCategoryPicker() {
			this.$refs.categoryPicker.show();
		},
		onCategoryCancel() {
			// 取消分类选择时的处理
		},
		// 设置默认选中的分类
		setDefaultSelectedCategory(categoryId) {
			console.log('设置默认选中分类:', categoryId);
			console.log('分类选项:', this.categoryOptions);

			// 在扁平化的分类中查找匹配的分类
			const targetCategory = this.flattenedCategories.find(category =>
				category.id.toString() === categoryId.toString()
			);

			if (targetCategory) {
				console.log('找到目标分类:', targetCategory);

				// 设置选中的分类信息
				this.selectedCategoryId = targetCategory.id;
				this.selectedCategoryPath = targetCategory.path;
				this.selectedCategoryTitle = targetCategory.originalTitle;

				// 设置 picker 的选中索引
				const categoryIndex = this.categoryOptions.findIndex(option =>
					option.value.toString() === categoryId.toString()
				);

				if (categoryIndex !== -1) {
					this.selectedCategoryIndex = [categoryIndex];
					console.log('设置分类选择器索引:', categoryIndex);
				}

				console.log('分类选择完成:', {
					id: this.selectedCategoryId,
					path: this.selectedCategoryPath,
					title: this.selectedCategoryTitle,
					index: this.selectedCategoryIndex
				});
			} else {
				console.log('未找到匹配的分类ID:', categoryId);
			}
		},
		// 分类选择确认
		onCategoryConfirm(e) {
			console.log('分类选择确认:', e);
			const selectedIndex = e.index[0];
			const selectedOption = this.categoryOptions[selectedIndex];

			if (selectedOption) {
				const categoryId = selectedOption.value;
				this.setDefaultSelectedCategory(categoryId);

				// 更新产品列表
				this.page = 1;
				this.productList = [];
				this.productParams.cate_id = categoryId;
				this.getProductList();
			}
		},
		onSpecCheckboxChange(e, specId) {
			const checkedList = e.detail.value;
			this.$set(this.selectedFilters, specId, checkedList);
			console.log(`规格 ${specId} 选择变更:`, checkedList);
		},
		getFilteredSpecValues(spec) {
			const searchText = this.specSearchText[spec.id];
			let specValues = spec.value || spec.values || [];

			// 确保 specValues 是数组
			if (!Array.isArray(specValues)) {
				console.warn('规格值不是数组格式:', specValues);
				// 如果是对象，尝试转换为数组
				if (typeof specValues === 'object' && specValues !== null) {
					specValues = Object.values(specValues);
				} else {
					specValues = [];
				}
			}

			if (!searchText || searchText.trim() === '') {
				return specValues;
			}

			return specValues.filter(item => {
				if (!item || typeof item !== 'object') {
					return false;
				}
				const title = item.title || item.name || '';
				return title.toLowerCase().includes(searchText.toLowerCase());
			});
		},

		onSpecSearch(specId, event) {
			const searchText = event.detail.value;
			this.$set(this.specSearchText, specId, searchText);
			console.log(`规格 ${specId} 搜索文本:`, searchText);
		},
		// 清理HTML标签：将<br>替换为换行符，去掉其他HTML标签
		cleanHtmlTags(htmlString) {
			if (!htmlString) return '';

			// 将<br>、<br/>、<br />等标签替换为换行符
			let cleanText = htmlString.replace(/<br\s*\/?>/gi, '\n');

			// 去掉所有其他HTML标签
			cleanText = cleanText.replace(/<[^>]*>/g, '');

			// 解码HTML实体
			cleanText = cleanText.replace(/&nbsp;/g, ' ');
			cleanText = cleanText.replace(/&lt;/g, '<');
			cleanText = cleanText.replace(/&gt;/g, '>');
			cleanText = cleanText.replace(/&amp;/g, '&');
			cleanText = cleanText.replace(/&quot;/g, '"');
			cleanText = cleanText.replace(/&#39;/g, "'");

			// 清理多余的空白字符，但保留换行符
			cleanText = cleanText.replace(/[ \t]+/g, ' ').trim();

			return cleanText;
		}
	},
	computed: {
		filteredProteinList() {
			console.log('过滤蛋白质列表:', this.proteinList, '搜索文本:', this.searchText.protein);
			if (!this.searchText.protein) return this.proteinList;
			return this.proteinList.filter(item =>
				item.title.toLowerCase().includes(this.searchText.protein.toLowerCase())
			);
		},
		categoryOptions() {
			return this.flattenedCategories.map(item => ({
				label: item.title,  // 直接使用 title，它已经包含了缩进和层级标记
				value: item.id,
				level: item.level,
				path: item.path,
				hasChildren: item.hasChildren,
				originalTitle: item.originalTitle
			}));
		}
	},
	watch: {
		specList: {
			handler(newVal) {
				if (newVal && newVal.length > 0 && !this.expandedSpecId) {
					this.expandedSpecId = newVal[0].id;
				}
			},
			immediate: true
		}
	}
}
</script>
<style lang="scss" scoped>
page {
	background: $page-color-base;
}
/*顶部下拉选择 属性*/
.rf-scroll-box {
	width: 100%;
	height: 480upx;
	box-sizing: border-box;
	position: relative;
	z-index: 99;
	color: $color-white;
	font-size: 30upx;
	word-break: break-all;
}
.rf-drop-item {
	color: #333;
	height: 80upx;
	font-size: 28upx;
	padding: 20upx 40upx 20upx 40upx;
	box-sizing: border-box;
	display: inline-block;
	width: 50%;
}
.rf-drop-btnbox {
	width: 100%;
	height: 100upx;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	display: flex;
}
.rf-drop-btn {
	width: 50%;
	font-size: 32upx;
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	border: 0;
}
.confirm-btn {
	background-color: #e53935; // 黑色背景
	color: #fff; // 白色文字
}
.rf-dropdownlist {
	width: 100%;
	position: absolute;
	background: $color-white;
	border-bottom-left-radius: 24upx;
	border-bottom-right-radius: 24upx;
	overflow: hidden;
	box-sizing: border-box;
	padding-top: 10upx;
	padding-bottom: 26upx;
	left: 0;
	top: 88upx;
	visibility: hidden;
	transition: all 0.2s ease-in-out;
	z-index: 99;
	.icongouxuan {
		font-size: $font-lg;
		line-height: 88upx;
	}
}
.rf-dropdownlist-show {
	visibility: visible;
}
.rf-dropdownlist-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: -1;
	transition: all 0.2s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.rf-mask-show {
	opacity: 1;
	visibility: visible;
}
.rf-dropdownlist-item {
	color: #333;
	height: 70upx;
	font-size: 28upx;
	padding: 0 40upx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
/*顶部下拉选择 综合*/
.rf-drawer-box {
	width: 500upx;
	font-size: 24upx;
	overflow: hidden;
	position: relative;
	padding-bottom: 100upx;
}
.rf-drawer-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30upx;
	box-sizing: border-box;
	height: 80upx;
}
.rf-title-bold {
	font-size: 26upx;
	font-weight: bold;
	flex-shrink: 0;
}
.rf-location {
	margin-right: 6upx;
}
.rf-attr-right {
	width: 70%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}
.rf-all-box {
	width: 90%;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.rf-drawer-content {
	padding: 10rpx 20rpx;
	display: flex;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
}
.rf-input {
	border: 0;
	height: 64upx;
	border-radius: 32upx;
	width: 45%;
	background: #f7f7f7;
	text-align: center;
	font-size: $font-base;
	color: #333;
}
.rf-phcolor {
	text-align: center;
	color: #b2b2b2;
	font-size: 24upx;
}
.rf-flex-attr {
	flex-wrap: wrap;
	justify-content: flex-start;
}
.rf-attr-item {
	width: 30%;
	height: 64upx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4upx;
	box-sizing: border-box;
	border-radius: 32upx;
	margin-right: 5%;
	margin-bottom: 5%;
}
.rf-attr-ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 96%;
	text-align: center;
}
.rf-attr-item:nth-of-type(3n) {
	margin-right: 0%;
}
.rf-attr-btnbox {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 0 30upx;
	background: $color-white;
}
.rf-attr-safearea {

	display: flex;
	align-items: center;
	justify-content: space-between;
	/*padding-bottom: env(safe-area-inset-bottom);*/
}
.rf-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}
.rf-attr-btnbox::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}
.rf-drawer-btn {
	width: 47%;
	text-align: center;
	height: 60upx;
	border-radius: 30upx;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.rf-drawerbtn-black {
	border: 1upx solid;
}
.product-list {
	padding-bottom: env(safe-area-inset-bottom);
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.rf-header-box {
		width: 100%;
		background: $color-white;
		// position: fixed;
		z-index: 100;
		left: 0;
		top: 0;
		.rf-header {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			width: 100%;
			box-sizing: border-box;

			.rf-back {
				margin-left: 8upx;
				height: 32px !important;
				width: 32px !important;
				display: flex;
				justify-content: center;
				align-items: center;
				.iconzuo {
					font-size: $font-lg + 4upx;
					font-weight: 500;
					color: $font-color-dark;
				}
			}
		}
		.input-box {
			flex: 1;
			min-width: 0;
			font-size: 32rpx;
			box-sizing: border-box;
			color: #333;
			display: flex;
			align-items: center;
			overflow: hidden;
			height: 90rpx;
			background: rgba(255,255,255,0.95);
			border-radius: 16rpx;
			position: relative;
			margin: 0 10rpx 0 10rpx;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
			.iconsousuo2 {
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 0;
				right: 0;
				width: 100rpx;
				height: 90rpx;
				font-size: 36rpx;
				color: #fff;
				background: #e53935;
				border-radius: 0 16rpx 16rpx 0;
				margin: 0;
				padding: 0;
			}
			input {
				width: 100%;
				padding: 0 20rpx;
				height: 90rpx;
				color: #333;
				font-size: 32rpx;
				border: none;
				background: transparent;
				margin: 0;
				line-height: 90rpx;
			}
		}
	}
	/*screen*/
	.rf-header-screen {
		width: 100%;
		background: $color-white;
		position: fixed;
		z-index: 99;
		.rf-screen-top,
		.rf-screen-bottom {
			border: none;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			color: #333;
		}
		.rf-screen-top {
			height: 88upx;
			line-height: 88upx;
			position: relative;
			background: $color-white;
		}
		.rf-top-item {
			height: 28upx;
			line-height: 28upx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont {
				font-size: $font-lg + 4upx;
				font-weight: 500;
			}
		}
		.rf-screen-bottom {
			height: 100upx;
			padding: 0 30upx;
			box-sizing: border-box;
			font-size: 24upx;
			align-items: center;
			overflow: hidden;
		}
		.rf-bottom-text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.rf-bottom-item {
			flex: 1;
			width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 12upx;
			box-sizing: border-box;
			margin-right: 20upx;
			white-space: nowrap;
			height: 60upx;
			border-radius: 40upx;
		}
		.rf-bottom-item:last-child {
			margin-right: 0;
		}
		.rf-bold {
			font-weight: bold;
		}
		.rf-active {
			color: $base-color;
		}
		.rf-icon-ml .rf-icon-class {
			margin-left: 6upx;
		}
		.rf-ml {
			margin-left: 6upx;
		}
		.rf-seizeaseat-20 {
			height: 20upx;
		}
		.rf-seizeaseat-30 {
			height: 30upx;
		}
		.rf-icon-middle .rf-icon-class {
			vertical-align: middle;
		}
		.rf-middle {
			vertical-align: middle;
		}
	}
	/*screen*/
	.rf-btmItem-active {
		border-radius: 32upx;
		font-weight: bold;
		position: relative;
	}
	.rf-btmItem-normal {
		border: 1upx solid rgba(0, 0, 0, 0.12);
		position: relative;
	}
	.rf-btmItem-active::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 40upx;
		left: 0;
		top: 0;
	}
	.rf-btmItem-tap {
		position: relative;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.rf-btmItem-tap::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 22upx;
		background: #f7f7f7;
		left: 0;
		top: 58upx;
	}
	.product-list-wrapper {
		/*#ifdef MP*/
		padding-top: 360rpx;
		/*#endif*/
	}
}
.search-ad {
	flex: 0 0 auto;
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100rpx;
	height: 90rpx;
	margin-left: 10rpx;
	padding: 0;
	flex-shrink: 0;
	/* 确保筛选按钮可见且不换行，与input-box对齐 */

	.rf-top-item {
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 20rpx;
		background-color: #e53935;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #fff;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 80rpx;
		border: none;
		font-weight: normal;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);

		&:hover {
			background-color: #d32f2f;
		}
	}
}
.attr-group {
	margin-bottom: 20rpx;
	background: #fff;

	.attr-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background: #fff5f5;
		font-size: 28rpx;
	}

	.attr-content {
		padding: 20rpx;
	}
}

.attr-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1px solid #f5f5f5;

	&.selected {
		color: #e4393c;
	}

	.check-icon {
		color: #e4393c;
		font-size: 24rpx;
	}
}

.search-box {
	margin-bottom: 20rpx;

	.search-input {
		width: 100%;
		height: 60rpx;
		background: #f5f5f5;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
	}
}

.arrow-icon {
	font-size: 24rpx;
	color: #999;
}
.attr-section {
	background: #fff;
	margin-bottom: 20rpx;
	width: 100%; /* 确保宽度是100% */
	display: block; /* 确保是块级元素 */
}

.attr-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx;
	background: #fff5f5;
	font-size: 28rpx;
	color: #333;

	.arrow-icon {
		color: #999;
		font-size: 24rpx;
	}
}

.spec-search-container {
	padding: 0 24rpx 15rpx 24rpx;
	background: #fff;
}

.spec-search-input {
	width: 100%;
	height: 60rpx;
	padding: 0 20rpx;
	border: 1px solid #e0e0e0;
	border-radius: 8rpx;
	font-size: 26rpx;
	background: #f9f9f9;
	box-sizing: border-box;

	&:focus {
		border-color: #e53935;
		background: #fff;
	}
}

.attr-content {
	padding: 20rpx;
	width: 100%;
	box-sizing: border-box;
}

.search-box {
	margin-bottom: 20rpx;

	.search-input {
		width: 100%;
		height: 60rpx;
		background: #fff;
		border: 1px solid #eee;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
	}
}

.attr-list {
	display: flex;
	flex-direction: column;
}

.attr-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
	width: 100%;
	box-sizing: border-box;

	checkbox {
		transform: scale(0.8);
	}

	.attr-label {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #333;
	}
}
.attr-list {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.attr-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1px solid #f5f5f5;
	width: 100%;
	box-sizing: border-box;

	checkbox {
		transform: scale(0.8);
	}

	.attr-label {
		margin-left: 10rpx;
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}
}
.item-selected {
	background-color: #fff5f5;
}

.item-selected text {
	color: #e4393c !important;
	font-weight: bold;
}

.custom-checkbox {
	position: relative;
	width: 36rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox-icon {
	width: 32rpx;
	height: 32rpx;
	border: 1px solid #ccc;
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checkbox-selected {
	background-color: #e4393c;
	border-color: #e4393c;
}

.checkbox-tick {
	color: white;
	font-size: 24rpx;
	font-weight: bold;
}
.rf-category-item {
	width: 95%;
	height: 64upx;
	display: flex;
	align-items: center;
	padding: 0 4upx;
	box-sizing: border-box;
	border-radius: 32upx;
	margin-bottom: 10upx;
	margin-left: 5upx;
}

.level-0 {
	margin-left: 0;
	font-weight: bold;
}

.level-1 {
	margin-left: 20upx;
}

.level-2 {
	margin-left: 40upx;
}

.level-3 {
	margin-left: 60upx;
}

.category-picker {
	width: 100%;
	margin-bottom: 20rpx;
}

.tree-picker {
	width: 100%;
}


/* 自定义样式，尝试覆盖默认样式 */
.uni-picker-custom {
	text-align: left !important;
}

.picker-view {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	display: flex;
	justify-content: flex-start; /* 改为左对齐 */
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.picker-arrow {
	color: #999;
	font-size: 24rpx;
	margin-left: auto; /* 将箭头推到右侧 */
	flex-shrink: 0;
}


.category-select-container {
	margin-bottom: 20rpx;
}

.category-label {
	font-size: 24rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.category-picker {
	width: 100%;
}

.picker-view {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.picker-arrow {
	color: #999;
	font-size: 24rpx;
}

.category-path {
	margin-top: 20rpx;
	padding: 15rpx;
	background-color: #fff5f5;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #e4393c;
	border: 1px solid #ffebeb;
	text-align: left;
}
/* 下拉内容左对齐，只用 ::v-deep */
::v-deep .uni-picker-view-content {
	text-align: left !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
}



::v-deep .uni-picker-container .uni-picker-item {
	text-align: left !important;
	border: 1px solid #ff0000 !important;
}

.picker-trigger {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	padding: 0 20rpx;
	background-color: #f8f8f8;
	border-radius: 8rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.picker-text {
	flex: 1;
	text-align: left;
	font-size: 28rpx;
	color: #333;
}

.picker-arrow {
	color: #999;
	font-size: 24rpx;
	margin-left: 10rpx;
}

/* 覆盖 rf-picker 弹窗高度 */
:deep(.mpvue-picker-view) {
	height: 50vh !important; /* 设置为屏幕高度的50% */
}

:deep(.mpvue-picker-content) {
	max-height: 70vh; /* 限制整个弹窗最大高度 */
	background-color: #fff;
}

:deep(.picker-item) {
	line-height: 50px; /* 适当增加选项高度 */
	font-size: 28rpx;
	padding: 0 20rpx;
	text-align: left;
}

:deep(.mpvue-picker__hd) {
	padding: 20rpx 30rpx;
	font-size: 32rpx;
	background-color: #f8f8f8;
}

:deep(.mpvue-picker__action) {
	font-size: 32rpx;
}

.picker-item{text-align: left !important;}

::v-deep .rf-pro-btn {
	height: 50rpx !important;
	min-height: 50rpx !important;
}
</style>
